
<template>
    <el-container>
        <el-main>
            <div>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="姓名">
                        <el-input v-model="formInline.name" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="风险等级">
                        <el-input v-model="formInline.level" placeholder="风险等级"> </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table ref="singleTable" :data="tableData" highlight-current-row style="width: 100%">
                    <el-table-column type="index"></el-table-column>
                    <el-table-column property="id" label="id"> </el-table-column>
                    <el-table-column property="user.name" label="姓名"> </el-table-column>
                    <el-table-column property="user.cardId" label="身份证号"></el-table-column>
                    <el-table-column property="user.age" label="年龄"></el-table-column>
                    <el-table-column property="user.gender" label="性别"></el-table-column>
                    <el-table-column property="user.address" label="地址"></el-table-column>
                    <el-table-column property="empId" label="员工id"></el-table-column>
                    <el-table-column property="user.lockd" label="是否锁定"></el-table-column>

                    <el-table-column label="操作" width="200px">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>

                            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <span class="demonstration"></span>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageInfo.pageNum"
                        :page-size="pageInfo.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pageInfo.pageTotal"
                    ></el-pagination>
                </div>
            </div>
        </el-main>
        <el-dialog title="修改" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="编号" :label-width="formLabelWidth">
                    <el-input v-model="form.id" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="业务员编号" :label-width="formLabelWidth">
                    <el-input v-model="form.empId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="客户编号" :label-width="formLabelWidth">
                    <el-input v-model="form.userId" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="风险等级" :label-width="formLabelWidth">
                    <el-input v-model="form.level" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateContract">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            pageInfo: {
                pageNum: 1,
                pageSize: 2,
                pageTotal: 0
            },
            dialogFormVisible: false,
            form: {
                id: '',
                empId: '',
                userId: '',
                level: ''
            },
            form2: {
                id: '',
                empId: '',
                userId: '',
                del: ''
            },
            formInline: {
                name: '',
                level: ''
            }
        };
    },
    methods: {
        handleEdit(index, row) {
            //console.log(index, row);
            this.form.id = row.id;
            this.form.empId = row.empId;
            this.form.userId = row.userId;
            this.form.level = row.level;
            this.dialogFormVisible = true;
        },
        updateContract: function () {
            this.$axios({
                url: this.$server + '/api/customer/update',
                data: this.form,
                method: 'post'
            }).then((r) => {
                if (r.data.code == 200) {
                    window.alert('修改成功');
                    this.dialogFormVisible = false;
                    window.location.reload();
                } else {
                    window.alert(r.data.message);
                }
            });
        },

        handleDelete(index, row) {
            this.form2.id = row.id;
            this.form2.empId = row.empId;
            this.form2.userId = row.userId;
            this.form2.del = row.del;
            this.$axios({
                url: this.$server + '/api/customer/del',
                data: this.form2,
                method: 'post'
            }).then((r) => {
                if (r.data.code == 200) {
                    window.alert('删除成功');
                    window.location.reload();
                } else {
                    window.alert(r.data.message);
                }
            });
            console.log(index, row);
        },
        handleCurrentChange(val) {
            this.pageInfo.pageNum = val;
            console.log('模糊查询' + this.formInline.name);
            if (this.formInline == '') {
                this.$axios({
                    method: 'get',
                    url: this.$server + '/api/customer/listall/' + val
                    // headers: {
                    //   token:
                    //     "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NvdW50IjoiYWRtaW4iLCJpZCI6MSwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2NDI5ODgzMzEsImF1ZCI6Indvbml1eHkiLCJleHAiOjE2NDI5OTAxMzEsIm5iZiI6MTY0Mjk4ODMzMX0.zEmcT8cuUvGF6QYjFAk3Yjvu2IEnhIRerokF00L9jA0",
                    // },
                }).then((r) => {
                    this.tableData = r.data.data.list;
                    this.pageInfo.pageTotal = r.data.data.total;
                });
            } else {
                this.$axios({
                    method: 'post',
                    url: this.$server + '/api/customer/page/',
                    // headers: {
                    //     token:
                    //       "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NvdW50IjoiYWRtaW4iLCJpZCI6MSwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2NDI5ODgzMzEsImF1ZCI6Indvbml1eHkiLCJleHAiOjE2NDI5OTAxMzEsIm5iZiI6MTY0Mjk4ODMzMX0.zEmcT8cuUvGF6QYjFAk3Yjvu2IEnhIRerokF00L9jA0",
                    //   },
                    data: {
                        customer: {
                            user: {
                                name: this.formInline.name
                            },
                            level: this.formInline.level
                        },
                        pageNum: val
                    }
                }).then((r) => {
                    this.tableData = r.data.data.list;
                    this.pageInfo.pageTotal = r.data.data.total;
                    console.log(r);
                });
            }
            // this.$axios({
            //   method: "get",
            //   url: global.server + "/api/customer/listall/" + val,
            //   headers: {
            //     token:
            //       "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NvdW50IjoiYWRtaW4iLCJpZCI6MSwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2NDI4NDgzMjIsImF1ZCI6Indvbml1eHkiLCJleHAiOjE2NDI4NTAxMjIsIm5iZiI6MTY0Mjg0ODMyMn0.Fgw1m7GF-lG7zgLmmogLUflEiD1scrYDu_nwJQZHd9s",
            //   },
            // }).then((r) => {
            //   this.tableData = r.data.data.list;
            // });
        },
        onSubmit() {
            console.log('提交' + this.formInline.name);
            this.$axios({
                method: 'post',
                url: this.$server + '/api/customer/page/',
                //  headers: {
                //     token:
                //       "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NvdW50IjoiYWRtaW4iLCJpZCI6MSwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2NDI5ODgzMzEsImF1ZCI6Indvbml1eHkiLCJleHAiOjE2NDI5OTAxMzEsIm5iZiI6MTY0Mjk4ODMzMX0.zEmcT8cuUvGF6QYjFAk3Yjvu2IEnhIRerokF00L9jA0",
                //   },
                data: {
                    customer: {
                        user: {
                            name: this.formInline.name
                        },
                        level: this.formInline.level
                    },
                    pageNum: this.pageInfo.pageNum
                }
            }).then((r) => {
                this.tableData = r.data.data.list;
                console.log('模糊查询数据' + r.data.data.navigatePages);
            });
        }
    },

    created: function () {
        this.$axios({
            method: 'get',
            url: this.$server + '/api/customer/listall/' + this.pageInfo.pageNum
            // headers: {
            //   token:
            //     "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NvdW50IjoiYWRtaW4iLCJpZCI6MSwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2NDI5ODgzMzEsImF1ZCI6Indvbml1eHkiLCJleHAiOjE2NDI5OTAxMzEsIm5iZiI6MTY0Mjk4ODMzMX0.zEmcT8cuUvGF6QYjFAk3Yjvu2IEnhIRerokF00L9jA0",
            // },
        }).then((r) => {
            if (r.data.code == 200) {
                this.tableData = r.data.data.list;
                console.log('分页信息--------------------->', r.data.data);
                r.data.data.list.forEach((element) => {
                    console.log(element.id);
                });
                this.pageInfo.pageTotal = r.data.data.total;
            }
        });
    },

    computed: {}
};
</script>



